// action creator，创建action 对象
import { TODO_UPDATE, TODO_DEL, TODO_ADD, TODO_CHECKALL } from './actionType';

export const updateByIdAction = (id) => {
  return {
    type: TODO_UPDATE,
    payload: id,
  };
};

// enf 快捷键生成
export const delByIdAction = (id) => {
  return {
    type: TODO_DEL,
    payload: id,
  };
};

/* 模拟异步API的方法 */
function loadNewTodoAPI() {
  const newTodo = {
    name: '异步返回的任务',
    id: +new Date(),
    done: false,
  };
  console.log('开始请求');
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('请求成功，2秒后,数据返回');
      resolve(newTodo);
    }, 2000);
  });
}

/* 
  学习目标：了解-Action默认只能处理同步行为，处理异步代码报错
  💥💥 默认Action不能有异步行为，React要求是Action只是一个普通的JS对象
1. ❌直接调用请求，发现拿到的是 Promise，不符合数据要求
2. ❌改成 async/await,数据回来了，但是async 把 数据变成了 Promise，不符合数据要求
*/

/*
  学习目标：Redux-中间件 - 使用redux-thunk中间件处理异步action
  1. npm i redux-thunk
  2. 配置中间件
  3. 💥action返回一个异步函数（同步返回的是一个 action对象）
  4. 💥返回的异步函数形参中，获取dispatch函数，通过dispatch调用action带对象
*/
export const addAction = (name) => {
  // 返回一个异步的函数，就是异步行为
  return async (dispatch) => {
    const newObj = await loadNewTodoAPI();
    dispatch({
      type: TODO_ADD,
      payload: newObj,
    });
  };

  // 直接返回 对象，那么是同步行为
  // return {
  //   type: TODO_ADD,
  //   payload: newObj,
  // };
};

export const checkAllAction = (bl) => {
  return {
    type: TODO_CHECKALL,
    payload: bl,
  };
};
